<!DOCTYPE html>

<html class="app-ui">

    <head>
        <!-- Meta -->
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

        <!-- Document title -->
        <title>Frontend - About | AppUI</title>

        <meta name="description" content="AppUI - Frontend Template & UI Framework" />
        <meta name="robots" content="noindex, nofollow" />

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" />
        <link rel="icon" href="assets/img/favicons/favicon.ico" />

        <!-- Google fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,900%7CRoboto+Slab:300,400%7CRoboto+Mono:400" />

        <!-- AppUI CSS stylesheets -->
        <link rel="stylesheet" id="css-font-awesome" href="assets/css/font-awesome.css" />
        <link rel="stylesheet" id="css-ionicons" href="assets/css/ionicons.css" />
        <link rel="stylesheet" id="css-bootstrap" href="assets/css/bootstrap.css" />
        <link rel="stylesheet" id="css-app" href="assets/css/app.css" />
        <link rel="stylesheet" id="css-app-custom" href="assets/css/app-custom.css" />
        <!-- End Stylesheets -->
    </head>

    <body class="app-ui">
        <div class="app-layout-canvas">
            <div class="app-layout-container">

                <!-- Header -->
                <header class="app-layout-header">
                    <nav class="navbar navbar-default p-y">
                        <div class="container">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
                                <!-- Header logo -->
                                <a class="navbar-brand" href="javascript:void(0)">
                                    <img class="img-responsive" src="assets/img/logo/logo-frontend.png" title="AppUI" alt="AppUI" />
                                </a>
                            </div>

                            <div class="collapse navbar-collapse" id="header-navbar-collapse">
                                <!-- Header search form -->
                                <form class="navbar-form navbar-right app-search-form" role="search">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input class="form-control" type="search" id="search-input" placeholder="Search..." />
                                            <span class="input-group-btn">
								<button class="btn" type="button"><i class="ion-ios-search-strong"></i></button>
							</span>
                                        </div>
                                    </div>
                                </form>

                                <!-- Header navigation menu -->
                                <ul id="main-menu" class="nav navbar-nav navbar-left">

                                    <li>
                                        <a href="frontend_home.html">Home</a>
                                    </li>

                                    <li class="active">
                                        <a href="frontend_about.html">About</a>
                                    </li>

                                    <li>
                                        <a href="frontend_pricing.html">Pricing</a>
                                    </li>

                                    <li>
                                        <a href="frontend_team.html">Team</a>
                                    </li>

                                    <li class="dropdown">
                                        <a href="#" data-toggle="dropdown">Pages <span class="caret"></span></a>
                                        <ul class="dropdown-menu">

                                            <li>
                                                <a href="frontend_search.html">Search</a>
                                            </li>

                                            <li>
                                                <a href="frontend_support.html">Support</a>
                                            </li>

                                            <li>
                                                <a href="frontend_contact.html">Contact</a>
                                            </li>

                                            <li>
                                                <a href="frontend_login_signup.html">Login / Signup</a>
                                            </li>

                                            <li>
                                                <a href="frontend_400.html">Error 400</a>
                                            </li>

                                        </ul>
                                    </li>

                                </ul>
                                <!-- End header navigation menu -->
                            </div>
                        </div>
                        <!-- .container -->
                    </nav>
                    <!-- .navbar -->
                </header>
                <!-- End header -->

                <main class="app-layout-content">

                    <!-- Page header -->
                    <figure class="banner bg-img bg-app bg-inverse" data-height="500" style="background-image: url(assets/img/misc/frontend_header_bg.png)">
                        <figcaption class="banner-caption text-center">
                            <div class="container">
                                <div class="row vcenter-md">
                                    <div class="col-md-8 col-md-offset-2">
                                        <div class="section-tag">We are AppUI</div>
                                        <h1 class="display-2 m-b">We Design and Develop for Mobile and Intranets</h1>
                                    </div>
                                </div>
                                <!-- .row -->
                                <div class="row">
                                    <div class="col-md-6 col-md-offset-3">
                                        <p class="lead">Munere dignissim euripidis nam cu. Nam semper dolorem honestatis cu, adhuc doctus mei ea. Mei recusabo consectetuer in.</p>
                                    </div>
                                </div>
                                <!-- .row -->
                            </div>
                            <!-- .container -->
                        </figcaption>
                    </figure>
                    <!-- End page header -->

                    <!-- Intro -->
                    <div class="section p-y-xl">
                        <div class="container text-center">

                            <div class="row">
                                <div class="col-md-6 col-md-offset-3">
                                    <p class="lead">Tollit ancillae mei ne, eu eos laudem labore utamur, et nec alienum accusata erroribus. An mei debet dicam, ubique sensibus posidonium est in, veri vidisse sit ea.</p>
                                    <div class="row">
                                        <div class="col-md-4 col-md-offset-4">
                                            <a class="btn btn-app btn-lg btn-block" href="javascript:void(0)">Learn more</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- .row -->
                        </div>
                        <!-- .container -->
                    </div>
                    <!-- .section -->
                    <!-- End intro -->

                    <!-- Features 1 -->
                    <div class="section bg-white p-y-xl">
                        <div class="container">
                            <div class="row m-b-lg text-center">
                                <div class="col-md-8 col-md-offset-2">
                                    <h1 class="display-2 m-t-0">We are shaping the future. Today.</h1>
                                    <p class="lead">Tollit ancillae ne, eu eos laudem labore utamur, et nec alienum accusata erroribus. An mei debet dicam, ubique sensibus necessitatibus et, mea dolorum nominavi.</p>
                                </div>
                            </div>
                            <!-- .row -->
                            <div class="row vcenter-md">
                                <div class="col-md-6 hidden-sm hidden-xs">
                                    <img class="img-responsive img-full" src="assets/img/misc/frontend_about1.png" />
                                </div>
                                <!-- .col-md-6 -->

                                <div class="col-md-4 col-md-offset-1">
                                    <ol class="list-numbers white">
                                        <li>
                                            <p class="h4">Real-time sharing</p>
                                            <p class="m-b-lg">Quot principes an usu. Usu cu putant audire accusam, aliquip aperiri sed ad. Has animal torquatos te, usu an vitae quodsi, enim invidunt ad pro.</p>
                                        </li>
                                        <li>
                                            <p class="h4">Share with anyone</p>
                                            <p class="m-b-lg">Graece vivendum torquatos ea qui. Summo minimum mandamus partiendo cu. Cum quando ea est. No porro dolor sea, ea pro aeque omnium.</p>
                                        </li>
                                        <li>
                                            <p class="h4">Secure enviroment</p>
                                            <p class="m-b-lg">Te putent timeam debitis vis, no fabulas ceteros honestatis eum. At eros accommodare duo. Ad repudiare vituperatoribus mea.</p>
                                        </li>
                                    </ol>
                                </div>
                                <!-- .col-md-4-->
                            </div>
                            <!-- .row -->
                        </div>
                        <!-- .container -->
                    </div>
                    <!-- .section -->
                    <!-- End features 1 -->

                    <!-- Features 2 -->
                    <div class="section p-y-xl">
                        <div class="container">
                            <div class="row vcenter-md">
                                <div class="col-md-4">
                                    <ol class="list-numbers">
                                        <li>
                                            <p class="h4">Easily track</p>
                                            <p class="m-b-lg">Vim oratio scripserit id, an quis quas sea. Usu senserit imperdiet id, ad sed autem nonumy viderer, te case animal iuvaret est.</p>
                                        </li>
                                        <li>
                                            <p class="h4">Edit and share files</p>
                                            <p class="m-b-lg">Assum ignota albucius eam cu, eu sea possim prodesset. Est verterem principes vituperatoribus te, nihil nullam everti ne pro.</p>
                                        </li>
                                        <li>
                                            <p class="h4">Adopt without any obstacles</p>
                                            <p class="m-b-lg">Ei pro malis semper periculis. Vel te summo scriptorem. Eu ius dicta oratio aeterno, ea mea adhuc illud sapientem, duo ne facete.</p>
                                        </li>
                                    </ol>
                                </div>
                                <!-- .col-md-5 -->

                                <div class="col-md-5 col-md-offset-3 hidden-sm hidden-xs">
                                    <img class="img-responsive img-full" src="assets/img/misc/frontend_about2.png" />
                                </div>
                                <!-- .col-md-5 -->
                            </div>
                            <!-- .row -->
                        </div>
                        <!-- .container -->
                    </div>
                    <!-- .section -->
                    <!-- End features 2 -->

                    <!-- What we do -->
                    <div class="section bg-white p-y-xl">
                        <div class="container text-center">

                            <div class="row m-b-lg">
                                <div class="col-md-6 col-md-offset-3">
                                    <h2 class="h1 display-2 m-t-0">Our services</h2>
                                    <p class="lead">Dicat eirmod aliquando mei ex, te voluptua ponderum sed, epicurei gloriatur forensibus duo et.</p>
                                </div>
                            </div>
                            <!-- .row -->

                            <div class="row">
                                <div class="col-sm-6 col-md-4">
                                    <h4>Real-time sharing</h4>
                                    <p class="m-b-lg">Quiver notes are composed of cells. When I first heard that, I wondered whether Quiver cells work like cells in a spreadsheet.</p>
                                </div>
                                <div class="col-sm-6 col-md-4">
                                    <h4>Share with anyone</h4>
                                    <p class="m-b-lg">Think of a Quiver note as a series of separately configurable boxes (the cells) stacked from the top of a note to the bottom.</p>
                                </div>
                                <div class="col-sm-6 col-md-4">
                                    <h4>Secure enviroment</h4>
                                    <p class="m-b-lg">Each cell can accept a different type of content and every time you want to switch content types within a note.</p>
                                </div>
                                <div class="col-sm-6 col-md-4">
                                    <h4>Easily track</h4>
                                    <p class="m-b-lg">A Quiver cell can be one of five types: text, Markdown, LaTeX, code, or a diagram. Text cells support rich text, images, web content.</p>
                                </div>
                                <div class="col-sm-6 col-md-4">
                                    <h4>Edit and share files</h4>
                                    <p class="m-b-lg">When you create a new note, an empty cell appears at the top of the note. Quiver ships with text cells as the default.</p>
                                </div>
                                <div class="col-sm-6 col-md-4">
                                    <h4>Adopt without any obstacles</h4>
                                    <p class="m-b-lg">The note editing pane's toolbar features formatting tools specific to the type of cell you are editing and includes controls.</p>
                                </div>
                            </div>
                            <!-- .row -->
                        </div>
                        <!-- .container -->
                    </div>
                    <!-- End what we do -->

                    <!-- Flexible plans -->
                    <div class="section p-y-xl">
                        <div class="container">
                            <div class="row m-b-lg text-center">
                                <div class="col-md-6 col-md-offset-3">
                                    <h2 class="h1 display-2 m-t-0">Flexible plans just for you</h2>
                                    <p class="lead">Dicat eirmod aliquando mei ex, te voluptua ponderum sed, epicurei gloriatur forensibus duo et.</p>
                                </div>
                            </div>
                            <!-- .row -->

                            <div class="row">
                                <div class="col-sm-6 col-lg-3">
                                    <!-- Developer Plan -->
                                    <a class="card hover-shadow-3 text-center" href="javascript:void(0)">
                                        <div class="card-header">
                                            <h3>Developer</h3>
                                        </div>
                                        <div class="card-block bg-gray-lighter-o">
                                            <div class="h1 m-y-sm">$9</div>
                                            <div class="h5 font-300 text-muted m-t-0">per month</div>
                                        </div>
                                        <div class="card-block">
                                            <table class="table table-borderless table-condensed">
                                                <tbody>
                                                    <tr>
                                                        <td><strong>2</strong> Projects</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>10GB</strong> Storage</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>15</strong> Users</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Email</strong> Support</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="card-block bg-gray-lighter-o">
                                            <span class="btn btn-default">Sign Up</span>
                                        </div>
                                    </a>
                                    <!-- End Developer Plan -->
                                </div>
                                <!-- .col-sm-6 -->

                                <div class="col-sm-6 col-lg-3">
                                    <!-- Startup Plan -->
                                    <a class="card hover-shadow-3 text-center" href="frontend_login_signup.html">
                                        <div class="card-header">
                                            <h3>Startup</h3>
                                        </div>
                                        <div class="card-block bg-green bg-inverse">
                                            <div class="h1 m-y-sm">$29</div>
                                            <div class="h5 font-300 text-muted m-t-0">per month</div>
                                        </div>
                                        <div class="card-block">
                                            <table class="table table-borderless table-condensed">
                                                <tbody>
                                                    <tr>
                                                        <td><strong>10</strong> Projects</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>30GB</strong> Storage</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>100</strong> Users</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Full</strong> Support</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="card-block bg-gray-lighter-o">
                                            <span class="btn btn-app">Sign Up</span>
                                        </div>
                                    </a>
                                    <!-- End Startup Plan -->
                                </div>
                                <!-- .col-sm-6 -->

                                <div class="col-sm-6 col-lg-3">
                                    <!-- Business Plan -->
                                    <a class="card hover-shadow-3 text-center" href="javascript:void(0)">
                                        <div class="card-header">
                                            <h3>Business</h3>
                                        </div>
                                        <div class="card-block bg-gray-lighter-o">
                                            <div class="h1 m-y-sm">$49</div>
                                            <div class="h5 font-300 text-muted m-t-0">per month</div>
                                        </div>
                                        <div class="card-block">
                                            <table class="table table-borderless table-condensed">
                                                <tbody>
                                                    <tr>
                                                        <td><strong>50</strong> Projects</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>100GB</strong> Storage</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>1000</strong> Users</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Full</strong> Support</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="card-block bg-gray-lighter-o">
                                            <span class="btn btn-default">Sign Up</span>
                                        </div>
                                    </a>
                                    <!-- End Business Plan -->
                                </div>
                                <!-- .col-sm-6 -->

                                <div class="col-sm-6 col-lg-3">
                                    <!-- Premium Plan -->
                                    <a class="card hover-shadow-3 text-center" href="javascript:void(0)">
                                        <div class="card-header">
                                            <h3>Premium</h3>
                                        </div>
                                        <div class="card-block bg-gray-lighter-o">
                                            <div class="h1 m-y-sm">$99</div>
                                            <div class="h5 font-300 text-muted m-t-0">per month</div>
                                        </div>
                                        <div class="card-block">
                                            <table class="table table-borderless table-condensed">
                                                <tbody>
                                                    <tr>
                                                        <td><strong>Unlimited</strong> Projects</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Unlimited</strong> Storage</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Unlimited</strong> Users</td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Full</strong> Support</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="card-block bg-gray-lighter-o">
                                            <span class="btn btn-default">Sign Up</span>
                                        </div>
                                    </a>
                                    <!-- End Premium Plan -->
                                </div>
                                <!-- .col-sm-6 -->
                            </div>
                            <!-- .row -->
                        </div>
                        <!-- .container -->
                    </div>
                    <!-- .section -->
                    <!-- End flexible plans -->

                    <!-- Ready to work -->
                    <div class="section bg-white p-y-xl">
                        <div class="container">
                            <div class="row text-center">
                                <div class="col-md-6 col-md-offset-3">
                                    <h2 class="h1 display-2 m-t-0">Ready to work with us?</h2>
                                    <p class="lead">Eirmod inermis hendrerit sea cu, et aliquip vituperata vix. Saepe praesent qui no, eu novum.</p>
                                </div>
                            </div>
                            <!-- .row -->

                            <div class="row">
                                <div class="col-md-6 col-md-offset-3">
                                    <form class="m-t-sm m-b-s">
                                        <div class="form-group row">
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" placeholder="Your name" />
                                            </div>
                                            <div class="col-sm-6">
                                                <input type="email" class="form-control" placeholder="Your email" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1" class="sr-only">Card number</label>
                                            <textarea class="form-control" id="exampleInputEmail1" placeholder="Your message.."></textarea>
                                        </div>
                                        <div class="form-group">
                                            <button type="button" class="btn btn-app btn-lg btn-block">Send a message</button>
                                        </div>
                                        <span class="help-block">This form is a placeholder. Requests won't be proccessed.</span>
                                    </form>
                                </div>
                                <!-- .col-md-6 -->
                            </div>
                            <!-- .row -->
                        </div>
                        <!-- .container -->
                    </div>
                    <!-- End ready to work -->

                </main>

                <footer class="app-layout-footer">
                    <div class="container p-y-md">
                        <div class="pull-right hidden-sm hidden-xs">
                            <a href="https://shapebootstrap.net/item/1525731-appui-admin-frontend-template/?ref=rustheme" target="_blank" rel="nofollow">Purchase a license</a>
                        </div>
                        <div class="pull-left text-center text-md-left">
                            AppUI &copy; <span class="js-year-copy"></span>
                        </div>
                    </div>
                </footer>

            </div>
            <!-- .app-layout-container -->
        </div>
        <!-- .app-layout-canvas -->

        <!-- Apps Modal -->
        <!-- Opens from the button in the header -->
        <div id="apps-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-sm modal-dialog modal-dialog-top">
                <div class="modal-content">
                    <!-- Apps card -->
                    <div class="card m-b-0">
                        <div class="card-header bg-app bg-inverse">
                            <h4>Apps</h4>
                            <ul class="card-actions">
                                <li>
                                    <button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-block">
                            <div class="row text-center">
                                <div class="col-xs-6">
                                    <a class="card card-block m-b-0 bg-app-secondary bg-inverse" href="index.html">
                                        <i class="ion-speedometer fa-4x"></i>
                                        <p>Admin</p>
                                    </a>
                                </div>
                                <div class="col-xs-6">
                                    <a class="card card-block m-b-0 bg-app-tertiary bg-inverse" href="frontend_home.html">
                                        <i class="ion-laptop fa-4x"></i>
                                        <p>Frontend</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- .card-block -->
                    </div>
                    <!-- End Apps card -->
                </div>
            </div>
        </div>
        <!-- End Apps Modal -->

        <!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
        <script src="assets/js/core/jquery.min.js"></script>
        <script src="assets/js/core/bootstrap.min.js"></script>
        <script src="assets/js/core/jquery.slimscroll.min.js"></script>
        <script src="assets/js/core/jquery.scrollLock.min.js"></script>
        <script src="assets/js/core/jquery.placeholder.min.js"></script>
        <script src="assets/js/app.js"></script>
        <script src="assets/js/app-custom.js"></script>

    </body>

</html>